<template>
  <div class="device-wrapper">
    <vue-particles
        class="login-background"
        color="#97D0F2"
        :particleOpacity="0.7"
        :particlesNumber="50"
        shapeType="circle"
        :particleSize="4"
        linesColor="#97D0F2"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="3"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
    <div class="device-css">
      <div class="system-title">
        <p class="title-icon"><img src="../../assets/icon/smart-icon.png" alt=""></p>
        <p>智能水产养殖</p>
      </div>
      <div>
        <deviceSolt v-for="(item,index) in list" :key="item" >
          <template #device-name><span @click="routerTo(item)" >{{item}}</span></template>
        </deviceSolt>
      </div>
      <div class="edition">
        <p>@copyRight2021</p>
      </div>
    </div>
  </div>
</template>

<!--设备管理页面-->
<script>
import deviceSolt from '../../components/device-solt'
export default {
  name: "device",
  data(){
    return{
      list:['设备一','设备二','设备三','设备四','设备五']
    }
  },
  mounted() {
    this.deviceInit();
  },
  methods:{
    deviceInit(){
      if(this.list == 0){
        this.list = ['无设备信息！']
      }
    },
    routerTo(item){
      // console.log(item);
      this.$router.push('./dataMain');
      this.$store.state.isColor = true;
      this.$store.state.golobalShow = 1
      console.log(item)//我这里的想法是可以用全局vuex的state接受，或者直接路由传值。
    }
  },
  components:{
    deviceSolt
  }
}
</script>

<style scoped lang="less">
  .login-background{
    position: absolute;
    height: 100vh;
    width: 100vw;
  }
  .device-wrapper{
    height: 100vh;
    width: 100vw;
    background-image: url('../../assets/backjpg/deviceBack.jpg');
    background-size: cover;
    //position: fixed;
    //left: 0;
    //right: 0;
    //bottom: 0;
  }
  .device-css{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 2;
  }
  .system-title{
    font-size: 4vw;
    color: #e5e5e5;
    font-style: italic;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edition{
    margin-top: 2vh;
    color: #999999;
  }
  .title-icon img{
    width: 6vw;
  }
</style>